<template>
  <div class="app-container">
    <!-- 筛选查询区域 -->
    <el-row :gutter="20" class="mb8">
      <el-col :span="18">
        <el-select v-model="selectedStation" placeholder="请选择电站" class="mr10">
          <el-option
            v-for="station in stations"
            :key="station.value"
            :label="station.label"
            :value="station.value"
          />
        </el-select>

        <el-radio-group v-model="deviceType" class="mr10">
          <el-radio-button label="all">全部</el-radio-button>
          <el-radio-button label="meter">电表</el-radio-button>
          <el-radio-button label="inverter">逆变器</el-radio-button>
        </el-radio-group>

        <el-input
          v-model="searchKeyword"
          placeholder="输入搜索关键词"
          style="width: 200px"
          class="mr10"
        />
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </el-col>
    </el-row>

    <!-- 数据展示区域 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>实时监测数据 - {{ selectedStationLabel }}</span>
      </div>

      <el-row :gutter="20">
        <!-- 相直流量 -->
        <el-col :span="8">
          <div class="data-section">
            <h4>相直流量</h4>
            <div class="data-item">R相直流量：{{ currentData.phaseRS.R }}</div>
            <div class="data-item">S相直流量：{{ currentData.phaseRS.S }}</div>
            <div class="data-item">T相直流量：{{ currentData.phaseRS.T }}</div>
          </div>
        </el-col>

        <!-- 故障信息 -->
        <el-col :span="16">
          <div class="data-section">
            <h4>故障信息</h4>
            <el-row :gutter="10">
              <el-col
                v-for="(fault, index) in currentData.faults"
                :key="index"
                :span="6"
              >
                故障表{{ index + 1 }}：{{ fault }}
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>

      <!-- 其他数据区块 -->
      <el-row :gutter="20" class="mt20">
        <el-col :span="12">
          <div class="data-section">
            <h4>逆变器状态</h4>
            <el-row :gutter="10">
              <el-col :span="12">内部温度：{{ currentData.inverter.tempInternal }}℃</el-col>
              <el-col :span="12">模块温度：{{ currentData.inverter.tempModule }}℃</el-col>
              <el-col :span="24" class="mt10">BUS电压：{{ currentData.inverter.busVoltage }}V</el-col>
            </el-row>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="data-section">
            <h4>电量参数</h4>
            <div class="data-item">总发电量：{{ currentData.power.total }}kWh</div>
            <div class="data-item">当日发电时间：{{ currentData.power.dailyHours }}小时</div>
          </div>
        </el-col>
      </el-row>

      <!-- 时间标识 -->
      <div class="time-display mt20">
        数据更新时间：{{ currentData.updateTime }}
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 电站选项
      stations: [
        { value: 'dn', label: 'DN电站' },
        { value: 'station2', label: '电站2' },
        // 可继续添加其他电站...
      ],
      selectedStation: 'dn',
      deviceType: 'all',
      searchKeyword: '',

      // 当前显示数据
      currentData: {
        phaseRS: { R: 1004, S: 993, T: 1002 },
        faults: [0, 0, 0, 0, 0],
        inverter: {
          tempInternal: 48,
          tempModule: 39,
          busVoltage: 630.3
        },
        power: {
          total: 183802,
          dailyHours: 197
        },
        updateTime: '2025-05-28 19:16:00'
      }
    }
  },
  computed: {
    selectedStationLabel() {
      const station = this.stations.find(s => s.value === this.selectedStation)
      return station ? station.label : ''
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      // 模拟API调用
      // this.$axios.get('/api/inverter-data').then(response => {
      //   this.currentData = response.data
      // })
    }
  }
}
</script>

<style scoped>
.data-section {
  border: 1px solid #ebeef5;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 15px;
}
.data-item {
  margin: 8px 0;
  color: #606266;
}
.time-display {
  text-align: right;
  color: #909399;
  font-size: 0.9em;
}
.mt20 { margin-top: 20px; }
.mt10 { margin-top: 10px; }
</style>
